<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link type="image/x-icon" href="../static/sysimg/favicon.ico" th:href="@{/sysimg/favicon.ico}" rel="shortcut icon"/>
    <!--引入bootstrap样式表-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
          th:href="@{/ext/bootstrap-4.6.0/css/bootstrap.css}" rel="stylesheet"/>
    <!--引入bootstrap-icons样式表-->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css"
          th:href="@{/ext/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet"/>
</head>
<body>
<div class="d-none">
    <input type="hidden" id="RootURL" th:value="${#request.contextPath}"/>
    <input type="hidden" id="SessionUserId" th:value="${#session} ? ${#session.getAttribute('userId')} : '' "/>
</div>
<div class="container">
    <!--    <div class="m-3 text-center">-->
    <!--        <h3>Hello World</h3>-->
    <!--    </div>-->
    <hr/>
    <div>
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" class="form-control" id="username">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="form-group">
            <label for="age">年龄:</label>
            <input type="text" class="form-control" id="age">
        </div>
        <div>
            <button class="btn btn-primary" id="addBtn">Add</button>
        </div>
    </div>
    <hr/>
    <div class="my-3 bg-light text-center">
        <ul class="m-2" id="userList"></ul>
    </div>
</div>

<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
        th:src="@{/ext/jquery-3.5.1/jquery-3.5.1.js}"></script>
<!--引入bootstrap，依赖jquery，需要放在jquery后-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"
        th:src="@{/ext/bootstrap-4.6.0/js/bootstrap.bundle.min.js}"></script>
<!--引入自定义工具-->
<script src="../static/js/baseTools.js" th:src="@{/js/baseTools.js}"></script>
<!--自由脚本-->
<script>
    const baseUrl = 'http://127.0.0.1:8080/demo' // RootURL

    function addUser(name, pwd, age) {
        const api = '/userApi/addUser'
        return new Promise((resolve, reject) => {
            $.ajax({
                url: baseUrl + api
                , type: 'POST' // 请求类型
                , data: {name: name, pwd: pwd, age: age} // 请求时携带的数据
                , contentType: 'application/x-www-form-urlencoded' // 定义请求数据的类型，默认urlencoded。'application/json' 会比较常用（当后端接收需要标准的json数据时）
                , success: function (rst, status, xhr) {
                    if (rst.errCode === 0) {
                        resolve(rst.data);
                    } else {
                        alert(rst.msg);
                        reject(rst.msg);
                    }
                }
                , error: function (xhr, status, error) {
                    alert('Request Error: ' + error);
                    reject(error);
                }
            })
        });
    }

    function getUsers() {
        const api = '/userApi/getUsers'
        return new Promise((resolve, reject) => {
            $.ajax({
                url: baseUrl + api
                , type: 'GET'
                , success: function (rst, status, xhr) {
                    if (rst.errCode === 0) {
                        resolve(rst.data);
                    } else {
                        alert(rst.msg);
                        reject(rst.msg);
                    }
                }
                , error: function (xhr, status, error) {
                    alert('Request Error: ' + error);
                    reject(error);
                }
            })
        });
    }

    function renderUserList(users) {
        // console.log(users);
        if (users && users.length > 0) {
            const ulDom = $('#userList')
            ulDom.empty();
            users.forEach((v) => {
                const ulHtml = '<li class="my-3">' + '<span class="mx-3">' + v.name + '</span><span class="mx-3 text-info"> [' + v.age + ']</span>' + '</li>'
                ulDom.append(ulHtml);
            })
        }
    }

    $(document).ready(function () {
        getUsers().then(function (res) {
            renderUserList(res);
        });
        $('#addBtn').click(function () {
            let name = $('#username').val();
            let pwd = $('#password').val();
            let age = $('#age').val();
            addUser(name, pwd, age).then(function (res) {
                getUsers().then(function (res) {
                    renderUserList(res);
                });
            });
        });
    });
</script>
</body>
</html>